<template>
  <div>
    <ContainerTitle text="培训基本信息"></ContainerTitle>
    <div class="tableDiv" v-loading="loading">
      <div class="rowDiv">
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">培训名称</div>
          <div class="valueDiv">
            <span>{{ training.title }}</span>
          </div>
        </div>
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">培训方式</div>
          <div class="valueDiv">{{ training.modeName }}</div>
        </div>
      </div>
      <div class="rowDiv">
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">培训时间</div>
          <div class="valueDiv">
            <span v-if="training.beginDate"
              >{{ training.trainBeginTime }} 至
              {{ training.trainEndTime }}</span
            >
            <span v-else>无</span>
          </div>
        </div>
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">类型</div>
          <div class="valueDiv">{{ training.typeName }}</div>
        </div>
      </div>
      <div class="rowDiv">
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">状态</div>
          <div class="valueDiv">
            {{ training.status == 1 ? "已报名" : "未报名" }}
          </div>
        </div>
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">培训地址</div>
          <div class="valueDiv">{{ training.address }}</div>
        </div>
      </div>
    </div>
    <ContainerTitle text="培训内容"></ContainerTitle>
    <div class="tableDiv" v-loading="loading">
      <div class="rowDiv">
        <div style="width: 100%; display: flex; justify-content: left">
          <div class="keyDiv" style="width: 80px">培训内容</div>
          <div class="valueDiv" style="flex: 1">
            {{ training.content.replace(/<[^<>]+>/g, "") }}
          </div>
        </div>
      </div>
      <div class="rowDiv">
        <div style="width: 100%; display: flex; justify-content: left">
          <div class="keyDiv" style="width: 80px">反馈</div>
          <div class="valueDiv" style="flex: 1">
            <div v-if="training.feedback">反馈：</div>
            <div v-if="training.feedback">{{ training.feedback }}</div>
            <div v-if="training.suggest">期望：</div>
            <div v-if="training.suggest">{{ training.suggest }}</div>
            <div v-if="!training.feedback">无</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTrainDetail } from "@/common/api/company.js";
export default {
  name: "comMyTrainingDetail",
  meta: {
    name: "培训通知详情页",
  },
  data() {
    return {
      crumbs: [
        {
          label: "企业空间",
          value: "companyMsg",
        },
        {
          label: "我的培训",
          value: "companyMyTraining",
        },
        {
          label: "企业培训查看页",
          value: "comMyTrainingDetail",
          choose: true,
        },
      ],
      training: {
        id: 22,
        title: "标题", //标题
        modeName: "视频", //培训方式
        trainBeginTime: "2020-05-01 20:00:00", // 培训开始时间
        trainEndTime: "2020-05-01 21:00:00", // 培训开始时间
        beginDate: "2020-05-01", // 报名开始日期
        endDate: "2020-05-01", // 报名开始日期
        organizerName: "主办单位", // 主办单位
        address: "地址", // 地址
        typeName: "指定", // 类型
        isJoin: "1", // 0 否 1 是
        content: "培训内容", // 培训内容
        feedback: "反馈", // 反馈
      },
      loading: false, //加载状态
    };
  },
  mounted() {
    this.loading = true;
    this.getTrainDetail();
  },
  methods: {
    // 获取培训通知详情
    async getTrainDetail() {
      const { code, msg, data } = await getTrainDetail(this.$route.query.id);
      this.loading = false;
      if (code != "200") return this.$message.warning(msg);
      this.training = data;
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
 .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

 .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.roomDiv {
  display: flex;
  justify-content: center;
  margin-bottom: 70px;
}

.roomDiv .leftDiv {
  min-width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}

 .topDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 .topDiv .msgDiv {
  font-size: 24px;
  font-weight: bold;
}

 .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px 10px 10px 0;
  margin-bottom: 20px;
}

 .tableDiv {
  border: 1px solid #eeeeee;
  color: #666666;
}

 .tableDiv .rowDiv {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
}

 .tableDiv .rowDiv .keyDiv {
  text-align: left;
  background-color: #f4f4f4;
  padding: 10px;
  width: 100px;
}

 .tableDiv .rowDiv .valueDiv {
  text-align: left;
  padding: 10px;
  width: 349px;
}
</style>